import React, { useEffect, useState } from "react";
import { Calendar } from "antd";
import type { Dayjs } from "dayjs";
import "./Sheduling.less";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

import { useSelector } from "react-redux";

import { EditOutlined } from "@ant-design/icons";

export default function Sheduling() {
  const cart = useSelector((state) => state.cartlist);
  const [value, setValue] = useState(() => dayjs().startOf("day"));
  const [selectedValue, setSelectedValue] = useState(() =>
    dayjs().startOf("day")
  );
  const onSelect = (newValue: Dayjs) => {
    setValue(newValue);
    setSelectedValue(newValue);
  };
  const onPanelChange = (newValue: Dayjs) => {
    setValue(newValue);
  };
  const dayOfWeek = selectedValue?.format("dddd");
  const [show, setShow] = useState(true);

  const getMonthData = (value: Dayjs) => {
    if (value.month() === 8) {
      return 1394;
    }
  };

  //月的内容
  const monthCellRender = (value: Dayjs) => {
    const num = getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null;
  };
  //日的内容
  const dateCellRender = (value: Dayjs) => {
    return (
      <div className="events">
        {cart.map((item: any) => {
          return (
            <div className="events-one" key={item.id}>
              {item.name}:{item.sx}/{item.zx}人
            </div>
          );
        })}
      </div>
    );
  };
  const cellRender = (current, info) => {
    if (info.type === "date") return dateCellRender(current);

    if (info.type === "month") return monthCellRender(current);
    return info.originNode;
  };

  const [hous, setHous] = useState(dayjs().startOf("hour").format("HH"));
  const [min, setMin] = useState(dayjs().startOf("minute").format("mm"));
  useEffect(() => {
    const interval = setInterval(() => {
      setHous(dayjs().startOf("hour").format("HH"));
      setMin(dayjs().startOf("minute").format("mm"));
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p className="sheduling-p">配送排版</p>
      <button className="sheduling-button">+ 添加班期</button>
      <div className="sheduling-top">
        <div className="sheduling-left">
          <div style={{ display: "flex" }}>
            <div className="sheduling-data">{selectedValue?.format("DD")}</div>
            <div className="sheduling-dataone">
              {selectedValue?.format("YYYY-MM-DD")}

              <div className="sheduling-dayxq">{dayOfWeek}</div>

              {show ? (
                <div className="sheduling-bj">
                  <EditOutlined
                    style={{ fontSize: "15px" }}
                    onMouseMove={() => setShow(false)}
                    onMouseLeave={() => setShow(true)}
                  />
                </div>
              ) : (
                <div
                  className="sheduling-bj1"
                  onMouseMove={() => setShow(true)}
                  onMouseLeave={() => setShow(false)}
                >
                  编辑
                </div>
              )}
            </div>
          </div>
          <hr style={{ border: "1px solid #ccc" }} />
          {cart.map((item) => {
            return (
              <div key={item.id}>
                <div
                  className={
                    Number(item.start.split(":")[0]) <= Number(hous) &&
                    Number(hous) <= Number(item.end.split(":")[0]) &&
                    Number(item.start.split(":")[1]) <= Number(min) &&
                    Number(min) <= Number(item.end.split(":")[1])
                      ? "sheduling-pbone1"
                      : "sheduling-pbone"
                  }
                >
                  {item.name}（{item.start}-{item.end}）
                </div>
                <div className="sheduling-psulone">
                  <ul>
                    <li>上线：{item.sx}人</li>
                    <li>
                      在线人数{item.zx}/{item.sx}人
                    </li>
                  </ul>
                </div>
              </div>
            );
          })}

          <div className="sheduling-bz">
            [备注]
            <br />
            ①暑期商家促销活动多，午市可能存在配送压力，需要增加配送员。
            <br />
            ②暑期商家促销活动多，午市可能存在配送压力，需要增加配送员。
          </div>
        </div>

        <div className="sheduling-right">
          <Calendar
            className="sheduling-calendar"
            value={value}
            locale={{
              lang: {
                locale: "zh-cn",
                placeholder: "Select date",
                rangePlaceholder: ["Start date", "End date"],
                today: "Today",
                now: "Now",
                backToToday: "Back to today",
                ok: "OK",
                clear: "Clear",
                month: "月",
                year: "年",
                timeSelect: "Select time",
                dateSelect: "Select date",
                monthSelect: "Choose a month",
                yearSelect: "Choose a year",
                decadeSelect: "Choose a decade",
                yearFormat: "YYYY",
                dateFormat: "M/D/YYYY",
                dayFormat: "D",
                dateTimeFormat: "M/D/YYYY HH:mm:ss",
                monthFormat: "MMMM",
                monthBeforeYear: true,
                previousMonth: "Previous month (PageUp)",
                nextMonth: "Next month (PageDown)",
                previousYear: "Last year (Control + left)",
                nextYear: "Next year (Control + right)",
                previousDecade: "Last decade",
                nextDecade: "Next decade",
                previousCentury: "Last century",
                nextCentury: "Next century",
                shortWeekDays: [
                  "星期日",
                  "星期一",
                  "星期二",
                  "星期三",
                  "星期四",
                  "星期五",
                  "星期六",
                ],
                shortMonths: [
                  "二月",
                  "一月",
                  "三月",
                  "四月",
                  "五月",
                  "六月",
                  "七月",
                  "八月",
                  "九月",
                  "十月",
                  "十一月",
                  "十二月",
                ],
              },
              timePickerLocale: {
                placeholder: "Select time",
              },
              dateFormat: "YYYY-MM-DD",
              dateTimeFormat: "YYYY-MM-DD HH:mm:ss",
              weekFormat: "YYYY-wo",
              monthFormat: "YYYY-MM",
            }}
            onSelect={onSelect}
            onPanelChange={onPanelChange}
            cellRender={cellRender}
          />
        </div>
      </div>
    </div>
  );
}
